<template>
  <div class="insurance-form-container">
    <el-card class="containerCard" shadow="never">
      <div class="containerTitle">保险经纪人</div>
      <div class="banner">
        <div class="text-box">
          <div class="t1">AI推荐·长期医疗</div>
          <div class="t2">每个人都是自己健康的第一责任人</div>
          <div class="t2">应保尽保，明日无忧</div>
        </div>
        <div class="pic"></div>
      </div>
      <!-- <div class="stepsBox">
        <div class="itemBox" :class="{ current: step == 0, active: step >= 0 }">
          <div class="iconBox">1</div>
          <div class="textBox">
            <div class="t1">填写基础信息</div>
            <div class="t2">AI推荐</div>
          </div>
        </div>
        <div class="itemBox" :class="{ current: step == 1, active: step >= 1 }">
          <div class="iconBox">2</div>
          <div class="textBox">
            <div class="t1">选择保险</div>
            <div class="t2">智能推荐适合的保险</div>
          </div>
        </div>
        <div class="itemBox" :class="{ current: step == 2, active: step >= 2 }">
          <div class="iconBox">3</div>
          <div class="textBox">
            <div class="t1">购买保险</div>
            <div class="t2">投保成功</div>
          </div>
        </div>
      </div> -->
      <div class="form-box">
        <el-form ref="step1Ref" class="formStyle" :model="step1Form" :rules="step1Rules" inline label-position="right">
          <!-- <el-form-item v-if="step1Form.kinship == '其他'" />
          <el-form-item label="其他亲属关系" v-if="step1Form.kinship == '其他'">
            <el-input v-model="otherKinship" placeholder="请输入其他亲属关系" />
          </el-form-item> -->
          <el-form-item label="您是" prop="employeeCategory" label-width="70px">
            <el-radio-group v-model="step1Form.employeeCategory">
              <el-radio label="员工本人">员工本人</el-radio>
              <el-radio label="员工家属">员工家属</el-radio>
            </el-radio-group>
            <!-- <el-select v-model="isPersonal">
              <el-option label="员工本人" :value="true" />
              <el-option label="员工家属" :value="false" />
            </el-select> -->
          </el-form-item>
          <el-form-item v-if="step1Form.employeeCategory != '员工本人'" />
          <el-form-item label="您的身份" prop="telecomStaff" v-if="step1Form.employeeCategory == '员工本人'"
            label-width="100px">
            <el-select v-model="step1Form.telecomStaff">
              <el-option :label="item" :value="item" v-for="(item, index) in telecomStaffList" :key="index" />
            </el-select>
          </el-form-item>
          <el-form-item label="年龄" prop="age" label-width="70px">
            <el-input v-model="step1Form.age" placeholder="请输入" />
            <!-- <el-select v-model="step1Form.ageSegment" placeholder="请选择年龄段">
              <el-option label="35岁及以下" value="35岁及以下" />
              <el-option label="36-50岁" value="36-50岁" />
              <el-option label="50-65岁" value="50-65岁" />
              <el-option label="65岁及以上" value="65岁及以上" />
            </el-select> -->
          </el-form-item>
          <el-form-item label="城市" prop="cityName" label-width="70px">
            <el-select v-model="step1Form.cityName" filterable placeholder="请选择城市">
              <el-option :label="item" :value="item" v-for="(item, index) in citys" :key="index" />
            </el-select>
          </el-form-item>
          <!-- <el-form-item v-if="!isPersonal" />
          <el-form-item label="亲属关系" prop="kinship" v-if="!isPersonal">
            <el-select v-model="step1Form.kinship" filterable placeholder="请选择亲属关系">
              <el-option :label="item" :value="item" v-for="(item, index) in kinshipList" :key="index" />
            </el-select>
          </el-form-item> -->
          <el-form-item label="持续购买企业住院综合医疗险" prop="purchaseHospitalInsurance" label-width="242px">
            <el-radio-group v-model="step1Form.purchaseHospitalInsurance">
              <el-radio label="是">是</el-radio>
              <el-radio label="否">否</el-radio>
            </el-radio-group>
            <!-- <el-select v-model="step1Form.purchaseHospitalInsurance">
              <el-option label="是" value="是" />
              <el-option label="否" value="否" />
            </el-select> -->
          </el-form-item>
          <!-- <el-form-item label="退休" prop="retire">
            <el-select v-model="step1Form.retire">
              <el-option label="是" value="是" />
              <el-option label="否" value="否" />
            </el-select>
          </el-form-item> -->
          <el-form-item label="曾患重大疾病" prop="criticalIllness" label-width="132px">
            <el-radio-group v-model="step1Form.criticalIllness">
              <el-radio label="是">是</el-radio>
              <el-radio label="否">否</el-radio>
            </el-radio-group>
            <!-- <el-select v-model="step1Form.criticalIllness">
              <el-option label="是" value="是" />
              <el-option label="否" value="否" />
            </el-select> -->
          </el-form-item>
          <el-form-item label="购买社保" prop="socialSecurity" label-width="242px"
            v-if="step1Form.employeeCategory == '员工家属'">
            <el-radio-group v-model="step1Form.socialSecurity">
              <el-radio label="是">是</el-radio>
              <el-radio label="否">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <!-- <el-form-item label="岗级" prop="positionLevel">
            <el-select v-model="step1Form.positionLevel" filterable placeholder="请选择岗级">
              <el-option :label="item" :value="item" v-for="(item, index) in jobRanks" :key="index" />
            </el-select>
          </el-form-item> -->
          <el-form-item label="患有慢性病" :label-width="step1Form.employeeCategory == '员工家属' ? '132px' : '242px'">
            <el-radio-group v-model="isBackgroundDisease">
              <el-radio :label="true">是</el-radio>
              <el-radio :label="false">否</el-radio>
            </el-radio-group>
            <!-- <el-select v-model="isBackgroundDisease">
              <el-option label="是" :value="true" />
              <el-option label="否" :value="false" />
            </el-select> -->
          </el-form-item>
          <!-- <el-form-item v-if="isBackgroundDisease" /> -->
          <!-- <el-form-item label="员工类型" prop="staffType">
            <el-select v-model="step1Form.staffType" filterable placeholder="请选择员工类型">
              <el-option :label="item" :value="item" v-for="(item, index) in staffTypeList" :key="index" />
            </el-select>
          </el-form-item> -->
          <el-form-item label="经常出差" prop="businessTrip"
            :label-width="step1Form.employeeCategory == '员工家属' ? '242px' : '132px'">
            <el-radio-group v-model="step1Form.businessTrip">
              <el-radio label="是">是</el-radio>
              <el-radio label="否">否</el-radio>
            </el-radio-group>
            <!-- <el-select v-model="step1Form.businessTrip">
              <el-option label="是" value="是" />
              <el-option label="否" value="否" />
            </el-select> -->
          </el-form-item>
          <el-form-item label="慢性病" prop="backgroundDisease" v-if="isBackgroundDisease" label-width="85px">
            <el-cascader v-model="backgroundDiseaseArr" :options="backgroundDiseaseOptionList"
              :props="{ multiple: true, emitPath: false }" :show-all-levels="false" clearable />
          </el-form-item>
        </el-form>
        <div class="btn">
          <el-button @click="resetForm()">重置</el-button>
          <el-button type="primary" @click="step1Next()">下一步</el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import * as api from '../api.js';
import AddApplicant from '../components/addApplicant.vue';

export default {
  components: { AddApplicant },
  data() {
    return {
      step: 1,
      step1Form: {
        age: '35',
        // ageSegment: '35岁及以下',
        cityName: '广州市',
        // positionLevel: '一级',
        socialSecurity: '是',
        businessTrip: '是',
        criticalIllness: '是',
        purchaseHospitalInsurance: '是',
        // retire: '否',
        backgroundDisease: null,
        // staffType: null,
        telecomStaff: '在岗员工',
        // kinship: '员工本人',
        employeeCategory: '员工本人',
      },
      step1Rules: {
        age: [{ required: true, message: '请输入年龄', trigger: 'change' }],
        // ageSegment: [{ required: true, message: '请选择年龄段', trigger: 'change' }],
        cityName: [{ required: true, message: '请选择城市', trigger: 'change' }],
        // positionLevel: [{ required: true, message: '请选择岗级', trigger: 'change' }],
        businessTrip: [{ required: true, message: '请选择是否经常出差', trigger: 'change' }],
        criticalIllness: [{ required: true, message: '请选择是否重大疾病', trigger: 'change' }],
        purchaseHospitalInsurance: [{ required: true, message: '请选择是否买过住院险', trigger: 'change' }],
        retire: [{ required: true, message: '请选择是否退休', trigger: 'change' }],
        // backgroundDisease: [{ required: true, message: '请选择是否有慢性病', trigger: 'change' }],
        telecomStaff: [{ required: true, message: '请选择是否电信员工', trigger: 'change' }],
      },
      isBackgroundDisease: false,
      isPersonal: true,
      otherKinship: '',
      jobRanks: [
        '一级',
        '二级',
        '三级',
        '四级',
        '五级',
        '六级',
        '七级',
        '八级',
        '九级',
        '十级',
        '十一级',
        '十二级',
        '十三级',
        '十四级',
        '十五级',
      ],
      citys: [
        '广州市',
        '深圳市',
        '佛山市',
        '珠海市',
        '江门市',
        '东莞市',
        '汕尾市',
        '惠州市',
        '梅州市',
        '湛江市',
        '阳江市',
        '茂名市',
        '揭阳市',
        '汕头市',
        '潮州市',
        '韶关市',
        '河源市',
        '肇庆市',
        '云浮市',
        '清远市',
        '中山市',
      ],
      backgroundDiseaseArr: [],
      backgroundDiseaseOptionList: [
        {
          value: '心血管疾病',
          label: '心血管疾病',
          children: [
            { value: '高血压（Ⅱ期及以上或伴并发症）', label: '高血压（Ⅱ期及以上或伴并发症）' },
            { value: '冠心病（含心绞痛、心肌梗死）', label: '冠心病（含心绞痛、心肌梗死）' },
            { value: '风湿性心脏病', label: '风湿性心脏病' },
            { value: '心肌病（扩张性心肌病等）', label: '心肌病（扩张性心肌病等）' },
            { value: '慢性心力衰竭', label: '慢性心力衰竭' },
            { value: '心脏瓣膜病', label: '心脏瓣膜病' },
            { value: '心律失常（如房颤）', label: '心律失常（如房颤）' },
          ],
        },
        {
          value: '呼吸系统疾病',
          label: '呼吸系统疾病',
          children: [
            { value: '支气管哮喘', label: '支气管哮喘' },
            { value: '慢性支气管炎', label: '慢性支气管炎' },
            { value: '阻塞性肺气肿/慢性阻塞性肺病（COPD）', label: '阻塞性肺气肿/慢性阻塞性肺病（COPD）' },
            { value: '支气管扩张', label: '支气管扩张' },
            { value: '慢性肺源性心脏病', label: '慢性肺源性心脏病' },
            { value: '活动性肺结核', label: '活动性肺结核' },
          ],
        },
        {
          value: '消化系统疾病',
          label: '消化系统疾病',
          children: [
            { value: '慢性肝炎（乙型/丙型）', label: '慢性肝炎（乙型/丙型）' },
            { value: '肝硬化（含失代偿期）', label: '肝硬化（含失代偿期）' },
            { value: '消化性溃疡', label: '消化性溃疡' },
            { value: '溃疡性结肠炎', label: '溃疡性结肠炎' },
            { value: '克罗恩病', label: '克罗恩病' },
            { value: '慢性萎缩性胃炎', label: '慢性萎缩性胃炎' },
          ],
        },
        {
          value: '泌尿系统疾病',
          label: '泌尿系统疾病',
          children: [
            { value: '慢性肾小球肾炎', label: '慢性肾小球肾炎' },
            { value: '慢性肾衰竭', label: '慢性肾衰竭' },
            { value: '肾病综合征', label: '肾病综合征' },
            { value: '尿毒症（需透析）', label: '尿毒症（需透析）' },
          ],
        },
        {
          value: '内分泌与代谢性疾病',
          label: '内分泌与代谢性疾病',
          children: [
            { value: '糖尿病（含并发症）', label: '糖尿病（含并发症）' },
            { value: '甲状腺功能亢进/减退', label: '甲状腺功能亢进/减退' },
            { value: '痛风', label: '痛风' },
          ],
        },
        {
          value: '神经系统疾病',
          label: '神经系统疾病',
          children: [
            { value: '脑梗塞/脑出血后遗症', label: '脑梗塞/脑出血后遗症' },
            { value: '帕金森病/综合征', label: '帕金森病/综合征' },
            { value: '癫痫', label: '癫痫' },
            { value: '重症肌无力', label: '重症肌无力' },
            { value: '多发性硬化', label: '多发性硬化' },
          ],
        },
        {
          value: '血液系统疾病',
          label: '血液系统疾病',
          children: [
            { value: '再生障碍性贫血', label: '再生障碍性贫血' },
            { value: '血友病', label: '血友病' },
            { value: '白血病', label: '白血病' },
          ],
        },
        {
          value: '风湿免疫性疾病',
          label: '风湿免疫性疾病',
          children: [
            { value: '类风湿性关节炎', label: '类风湿性关节炎' },
            { value: '系统性红斑狼疮', label: '系统性红斑狼疮' },
            { value: '强直性脊柱炎', label: '强直性脊柱炎' },
            { value: '干燥综合征', label: '干燥综合征' },
          ],
        },
        {
          value: '其他疾病',
          label: '其他疾病',
        },
      ],
      staffTypeList: [
        '中国电信广东公司在岗员工',
        '市场化承包人员',
        '外包服务人员',
        '65周岁以下的在册不在岗员工、内退及退休人员',
      ],
      kinshipList: ['父母', '配偶', '子女', '其他'],
      telecomStaffList: ['在岗员工', '市场化承包人员', '外包服务人员', '在册不在岗员工', '内退', '退休人员'],
      insuranceTableData: [],
      insuranceTotal: 0,
      insurancePageNum: 1,
      insurancePageSize: 10,
      applicantTableData: [
        {
          name: '刘全彷',
          id: '4401**********5512',
          money: '',
          age: 36,
        },
      ],
    };
  },
  computed: {
    calculateHeight() {
      // 获取屏幕宽度
      let screenWidth = document.body.clientWidth;
      if (screenWidth > 1920) {
        return '38vh';
      } else {
        return '31vh';
      }
    },
  },
  watch: {
    backgroundDiseaseArr: {
      handler(newVal) {
        this.step1Form.backgroundDisease = newVal.join('、');
      },
      immediate: true,
    },
    isBackgroundDisease: {
      handler(newVal) {
        if (newVal) {
          this.step1Rules.backgroundDisease = [{ required: true, message: '请选择慢性病', trigger: 'change' }];
        } else {
          this.step1Form.backgroundDisease = '';
          delete this.step1Rules.backgroundDisease;
        }
      },
      immediate: true,
    },
    // isPersonal: {
    //   handler(newVal) {
    //     if (newVal) {
    //       this.step1Form.kinship = '';
    //       delete this.step1Rules.kinship;
    //     } else {
    //       this.step1Rules.kinship = [{ required: true, message: '请选择亲属关系', trigger: 'change' }];
    //     }
    //   },
    //   immediate: true,
    // },
  },
  mounted() {
    // this.step1SubmitForm();
  },
  methods: {
    resetForm() {
      this.$refs.step1Ref.resetFields();
    },
    step1Next() {
      this.$refs.step1Ref.validate((valid) => {
        if (!valid) return;
        if (this.step1Form.ageSegment == '65岁及以上') {
          this.step1SubmitForm();
        } else if (
          this.step1Form.businessTrip == '是'
          // this.step1Form.businessTrip == '是' ||
          // ['一级', '二级', '三级', '四级', '五级', '六级'].includes(this.step1Form.positionLevel)
        ) {
          // this.$alert('尊敬的客户，鉴于您的场景多样化，为您的安全加双保险，现推荐您购买两份意外险', '温馨提示', {
          //   confirmButtonText: '确定',
          //   callback: (action) => {
          //     this.step1SubmitForm();
          //   },
          // });
          this.step1SubmitForm();
        } else {
          this.step1SubmitForm();
        }
      });
    },
    step1SubmitForm() {
      const params = JSON.parse(JSON.stringify(this.step1Form));
      if (params.backgroundDisease === '') params.backgroundDisease = '无';
      if (params.employeeCategory === '员工家属') delete params.telecomStaff;
      // if (params.kinship == '其他') params.kinship = this.otherKinship;
      // api.getListDs(params).then((res) => {
      //   if (res.code == 200) {
      //     this.$message({ message: '提交成功', type: 'success' });
      //     this.$emit('submitForm', params);
      //   }
      // });
      // this.$message({ message: '提交成功', type: 'success' });
      this.$emit('submitForm', params);
    },
  },
};
</script>

<style lang="scss" scoped>
@import '@/assets/styles/mixin.scss';

@font-face {
  font-family: 'Alibaba PuHuiTi 3.0';
  src: url('~@/assets/font/AlibabaPuHuiTi-3-55-Regular.ttf') format('woff2');
}

.container {
  .containerCard {
    border-radius: 8px;
    min-height: calc(100vh - 130px);

    .containerTitle {
      font-size: 20px;
      margin-bottom: 15px;
    }

    .banner {
      // height: 18vh;
      padding: 0 100px;
      border-radius: 14px;
      background: linear-gradient(100deg, #e9f7ff 1%, #d9ebfa 101%);
      // padding: 2vh 5vw;
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .pic {
        // position: absolute;
        // top: 0;
        // left: 0;
        width: 180px;
        height: 180px;
        background-image: url('../img/banner.png');
        background-repeat: no-repeat;
        // background-position-x: right;
        // background-position-y: center;
        background-size: 100%;
      }

      .text-box {
        color: #3d3d3d;

        .t1 {
          font-size: 24px;
        }

        .t2 {
          font-size: 30px;
        }

        & > div {
          margin-bottom: 10px;

          &:last-child {
            margin-bottom: 0px;
          }
        }
      }
    }

    .stepsBox {
      width: 65vw;
      display: flex;
      justify-content: space-between;
      margin: 2vh auto;

      .itemBox {
        display: flex;
        justify-content: center;
        flex: 1;

        .iconBox {
          width: 3rem;
          height: 3rem;
          background-color: #f2f3f5;
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 50%;
          margin-right: 0.5vw;
          font-size: 2rem;
          color: #4e5969;
        }

        .textBox {
          .t1 {
            color: #4e5969;
            font-size: 2rem;
            line-height: 3rem;
          }

          .t2 {
            color: #86909c;
            font-size: 1.5rem;
          }
        }
      }

      .active {
        .iconBox {
          background: #e8f3ff url('../img/icon1.png') no-repeat center center;
          background-size: 1rem;
          color: transparent;
        }

        .textBox {
          .t1 {
            color: #1d2129;
          }
        }
      }

      .current {
        .iconBox {
          background-color: #165dff;
          color: #fff;
        }

        .textBox {
          .t1 {
            color: #1d2129;
          }
        }
      }
    }

    .form-box {
      // width: 62%;
      // width: 1000px;
      // margin: 0 auto;
      margin-top: 60px;

      // display: flex;
      // flex-direction: column;
      // justify-content: flex-start;
      // align-items: center;
      .formStyle {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        // justify-content: space-evenly;
        // height: 25vh;
        // margin: 2vw auto;
        @include el-form-style;

        ::v-deep .el-form-item {
          margin: 0 calc(44% / 4);
          margin-bottom: 50px;
          padding-right: 0px;
          // width: 450px;
          width: 28%;

          // &:nth-child(2n-1) {
          //   margin-right: 100px;
          // }
        }
      }

      .btn {
        width: fit-content;
        margin: 30px auto;
      }
    }

    .steps2Main {
      width: 100%;
      margin: 0 auto;

      .steps2Maintitle {
        color: #1d2129;
        font-size: 1.5rem;
        margin-bottom: 1vh;
      }

      ::v-deep .el-table {
        .el-table__cell {
          padding: 15px 0;
        }

        .el-table__header-wrapper {
          th {
            height: 60px;
          }
        }

        .cell {
          font-size: 1.3rem;
        }

        .el-link {
          font-size: 1.3rem;
        }
      }

      .addPersonBox {
        height: 40px;
        margin-bottom: 12px;
        cursor: pointer;
        background-color: #f7f8fa;
        display: flex;
        justify-content: center;
        align-items: center;
        user-select: none;

        .icon {
          width: 1.25rem;
          height: 1.25rem;
          background: url('../img/icon2.png');
          background-repeat: no-repeat;
          background-size: cover;
          margin-right: 0.5vw;
          transition: 0.7s ease-in-out;
        }

        .text {
          font-size: 1.3rem;
          color: #3d3d3d;
        }

        &:hover {
          background-color: #f2f3f5;

          .icon {
            transform: rotate(360deg);
          }

          .text {
            color: #3d3d3d;
          }
        }
      }

      .btn {
        width: fit-content;
        margin: 0 auto;
      }
    }
  }

  ::v-deep .el-dialog__wrapper {
    display: flex;
    justify-content: center;
    align-items: center;

    .InsuranceParticularsBox {
      width: 25vw;
      border-radius: 8px;
      margin: 0 !important;

      .el-dialog__body {
        padding: 0 30px;
      }

      .el-dialog__header {
        padding: 30px;
        padding-bottom: 0;
      }

      .el-dialog__title {
        font-size: 1.7rem;
        font-weight: bold;
      }

      .detailsList {
        border-bottom: 0.2rem solid #f6f6f6;
        padding: 2vh 0;

        .itemBox {
          display: flex;
          justify-content: space-between;
          margin-bottom: 1vh;

          .name {
            color: #3d3d3d;
            font-size: 1.3rem;
          }

          .value {
            color: #b5b5b5;
            font-size: 1.2rem;
          }
        }
      }

      .detailsList2 {
        padding: 2vh 0;

        .itemBox {
          display: flex;
          justify-content: space-between;
          margin-bottom: 1vh;

          .name {
            color: #3d3d3d;
            font-size: 1.3rem;
          }

          .value {
            color: #b5b5b5;
            font-size: 1.2rem;
          }
        }
      }

      .readme {
        margin-block: 2vh;

        .p1 {
          font-size: 1.2rem;
          margin-right: 0.3vw;
        }

        .el-link--inner {
          vertical-align: text-bottom;
        }
      }
    }
  }
}
</style>
